<template>
    <div>
        <router-view></router-view>
        <div class="footer">
            <ul class="footer-nav">
                <li v-for="(item,index) in nav" :key="index">
                    <router-link :to="item.path">
                        <i class="iconfont" :class="item.icon" iconShow="0"></i>
                        <br/>
                        <span>{{item.title}}</span>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: 'index',
    data() {
        return {
            nav: [
                { title: '首页', name: 'Home', path: '/main/home', icon: 'icon-home' },
                { title: '全部产品', name: 'RecommentProduct', path: '/main/recommentproduct', icon: 'icon-tuijian' },
                { title: '我的', name: 'Mine', path: '/main/mine', icon: 'icon-shuizhu1' }
            ]
        }
    }
}
</script>
<style lang="scss">
@import '../scss/variable/base.scss';
.footer {
    width: 100%;
    height: 1.3rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    padding-top: 0.06rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    ul {
        width: 100%;
        height: 100%;
        padding-top: 0.05rem;
        li {
            float: left;
            list-style: none;
            width: 33.33%;
            a {
                display: inline-block;
                width: 100%;
                color:$navColor;
                height: 100%;
                font-size: 0.25rem;
            }
            span {
                margin-left: -0.065rem;
            }
            .iconfont {
                font-size: 0.55rem;
            }
        }
    }

    .router-link {
        color: #cbcbcb;
    }

    .router-link-active {
        color: #3ed2db;
        border: none !important;
    }
}
</style>


